<template>
  <div>
    <el-row>
      <el-col :span="12">
        <div>
          <el-card class="box-card">
            <div class="text item">
              <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="">
                  <el-input
                    v-model="foodName"
                    size="medium"
                    placeholder="查询"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button
                    size="small"
                    @click="getRecord()"
                    type="success"
                    icon="el-icon-search"
                    >查询</el-button
                  >
                </el-form-item>
                <el-form-item label="">
                  <el-button
                    size="small"
                    type="primary"
                    @click="addition(1)"
                    icon="el-icon-circle-plus-outline"
                    >新增</el-button
                  >
                </el-form-item>
              </el-form>
              <el-table
                :data="tableData"
                border
                v-loading="loadFlag"
                style="width: 100%"
              >
                <el-table-column
                  prop="categoryName"
                  label="名称"
                  align="center"
                >
                </el-table-column>
                <el-table-column label="操作" width="240" align="center">
                  <template #default="scope">
                    <el-button
                      size="mini"
                      type="success"
                      @click="checkboxradio(scope.row)"
                      >查看</el-button
                    >
                    <el-button size="mini" @click="handleEdit(scope.row, 2)"
                      >编辑</el-button
                    >
                    <el-button
                      size="mini"
                      type="danger"
                      @click="deleted(scope.row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <!-- 分页 -->
              <div class="pagingClass">
                <el-pagination
                  :page-sizes="m_page.sizes"
                  :page-size="m_page.size"
                  :current-page="m_page.number"
                  @size-change="m_handleSizeChange"
                  @current-change="m_handlePageChange"
                  layout="total,sizes,prev, pager, next"
                  background
                  :total="m_page.totalElements"
                ></el-pagination>
              </div>
            </div>
          </el-card></div
      ></el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>字典详情</span>
              <el-button
                style="float: right"
                size="small"
                type="primary"
                @click="newcastle(1)"
                icon="el-icon-circle-plus-outline"
                >新增</el-button
              >
            </div>
          </template>
          <div class="text item">
            <el-table :data="detailList" border style="width: 100%">
              <el-table-column prop="text" label="字典名称" align="center">
              </el-table-column>

              <el-table-column prop="value" label="字典值" align="center">
              </el-table-column>

              <el-table-column label="操作" width="240" align="center">
                <template #default="scope">
                  <el-button size="mini" @click="handleEdit1(scope.row, 2)"
                    >编辑</el-button
                  >
                  <el-button
                    size="mini"
                    type="danger"
                    @click="deleted1(scope.row)"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog
      :title="single"
      v-model="plassets"
      width="30%"
      :close-on-click-modal="false"
    >
      <el-form :model="form" :rules="rules" ref="form" label-width="80px">
        <el-form-item label="字典名称" prop="named">
          <el-input v-model="form.named" style="width: 300px"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="plassets = false">取 消</el-button>
          <el-button type="primary" v-if="under == 1" @click="Determine('form')"
            >确 定</el-button
          >
          <el-button type="primary" v-else @click="hardware('form')"
            >编辑确定</el-button
          >
        </span>
      </template>
    </el-dialog>
    <el-dialog
      title="字典详情"
      v-model="nodeDetail"
      width="30%"
      :close-on-click-modal="false"
    >
      <el-form :model="menu" ref="menu" label-width="80px">
        <el-form-item label="字典名称" prop="named">
          <el-input v-model="menu.lname" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="字典值" prop="named">
          <el-input v-model="menu.value" style="width: 300px"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="nodeDetail = false">取 消</el-button>
          <el-button type="primary" v-if="under == 1" @click="Determine1()"
            >确 定</el-button
          >
          <el-button type="primary" v-else @click="hardware1()"
            >编辑确定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      foodName: "",
      plassets: false,
      nodeDetail: false,
      loadFlag: false, //加载flag
      form: {
        named: "", //字典名称
      },
      menu: {
        lname: "", //详情字典名称
        value: "", //字典值
      },
      rules: {
        named: [
          { required: true, message: "请输入字典名称", trigger: "change" },
        ],
      },
      tableData: [],
      detailList: [],
      m_page: {
        sizes: [10, 20, 40, 50, 100], //每页最大显示数
        size: 10,
        totalElements: 0,
        totalPages: 3,
        number: 1,
      },
      radioid: "",
      underID: "",
      underID1: "",
      under: 1,
      single: "",
      headerObj: "",
    };
  },
  created() {
    let str = sessionStorage.getItem("token");
    this.headerObj = `Bearer ${str}`;
  },
  beforeMount() {
    this.getRecord();
  },
  methods: {
    deleted1(row) {
      console.log(row);
      this.$confirm("确认删除该设备?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .post(
              `api/serial/Dictionaries`,
              {
                id: row.id,
                type: row.type,
                text: row.text,
                value: row.value,
                isDelete: 1,
              },
              {
                headers: {
                  Authorization: this.headerObj,
                },
              }
            )
            .then(() => {
              this.checkboxradio1();
              this.$message.success("删除成功");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    hardware1() {
      this.$axios
        .post(
          `api/serial/Dictionaries`,
          {
            id: this.underID1,
            type: this.radioid,
            text: this.menu.lname,
            value: this.menu.value,
          },
          {
            headers: {
              Authorization: this.headerObj,
            },
          }
        )
        .then(() => {
          this.$message({
            message: "编辑成功",
            type: "success",
          });
          this.checkboxradio1();
          this.nodeDetail = false;
        })
        .catch(() => {
          this.$message.error("编辑失败");
        });
    },
    handleEdit1(row, index) {
      this.under = index;
      this.nodeDetail = true;
      this.underID1 = row.id;
      this.menu.lname = row.text;
      this.menu.value = row.value;
    },
    Determine1() {
      this.$axios
        .post(
          `api/serial/Dictionaries`,
          {
            type: this.radioid,
            text: this.menu.lname,
            value: this.menu.value,
          },
          {
            headers: {
              Authorization: this.headerObj,
            },
          }
        )
        .then(() => {
          this.$message({
            message: "保存成功",
            type: "success",
          });
          this.checkboxradio1();
          this.nodeDetail = false;
        })
        .catch(() => {
          this.$message.error("保存失败");
        });
    },
    newcastle(index) {
      this.under = index;
      this.nodeDetail = true;
      this.menu.lname = "";
      this.menu.value = "";
      this.underID1 = "";
    },
    //删除
    deleted(row) {
      console.log(row);
      console.log(row.id);
      let into = row;
      this.$confirm("确认删除该设备?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .post(
              `api/serial/DictionariesType`,
              {
                id: into.id,
                categoryName: into.categoryName,
                isDelete: 1,
              },
              {
                headers: {
                  Authorization: this.headerObj,
                },
              }
            )
            .then(() => {
              this.getRecord();
              this.$message.success("删除成功");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    hardware(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.$axios
            .post(
              `api/serial/DictionariesType`,
              {
                id: this.underID,
                categoryName: this.form.named,
              },
              {
                headers: {
                  Authorization: this.headerObj,
                },
              }
            )
            .then(() => {
              this.$message({
                message: "编辑成功",
                type: "success",
              });
              this.getRecord();
              this.plassets = false;
            })
            .catch(() => {
              this.$message.error("编辑失败");
            });
        } else {
          return false;
        }
      });
    },

    handleEdit(row, index) {
      this.under = index;
      this.plassets = true;
      this.underID = row.id;
      this.single = "编辑字典";
      this.form.named = row.categoryName;
    },
    Determine(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          //   alert("submit!");
          this.$axios
            .post(
              `api/serial/DictionariesType`,
              {
                categoryName: this.form.named,
              },
              {
                headers: {
                  Authorization: this.headerObj,
                },
              }
            )
            .then(() => {
              this.$message({
                message: "保存成功",
                type: "success",
              });
              this.getRecord();
              this.plassets = false;
            })
            .catch(() => {
              this.$message.error("保存失败");
            });
        } else {
          return false;
        }
      });
    },
    addition(index) {
      this.under = index;
      this.single = "新增字典";
      this.plassets = true;
      this.form.named = "";
      this.underID = "";
    },
    checkboxradio(row) {
      //   console.log(val);
      this.radioid = row.id;
      this.checkboxradio1();
      console.log(this.radioid);
    },
    checkboxradio1() {
      this.$axios({
        methods: "GET",
        url: "api/serial/Dictionaries",
        headers: {
          Authorization: this.headerObj,
        },
        params: {
          pageSize: 500,
          pageIndex: 1,
          query: {
            type: this.radioid,
          },
        },
      }).then((res) => {
        this.detailList = res.data.data;
        console.log(this.detailList);
        // ({ data: this.tableData, count: this.m_page.totalElements } = res.data);
        // this.loadFlag = false;
      });
    },
    getRecord() {
      this.loadFlag = true;
      this.$axios({
        methods: "GET",
        url: "api/serial/DictionariesType",
        headers: {
          Authorization: this.headerObj,
        },
        params: {
          pageSize: this.m_page.size,
          pageIndex: this.m_page.number,
          query: {
            categoryName: this.foodName,
          },
        },
      }).then((res) => {
        ({ data: this.tableData, count: this.m_page.totalElements } = res.data);
        this.loadFlag = false;
      });
    },
    //页码
    m_handlePageChange(currPage) {
      this.m_page.number = currPage;
      this.getRecord();
    },
    m_handleSizeChange(currSize) {
      this.m_page.size = currSize;
      this.getRecord();
    },
  },
};
</script>

<style >
</style>